.report-container {
  min-height: 100vh;

  background: url("@/static/images/bg.png") no-repeat 0 0, #F5F6FC;;
  background-size: contain;

  //padding: 76rpx 20rpx;
  padding: 76rpx 40rpx;
  box-sizing: border-box;

  .title {
    width: 100%;
    height: 180rpx;

    .img {
      width: 100%;
      height: 100%;
    }
  }

  .grade-box {
    height: 292rpx;
    width: 292rpx;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url("@/static/images/grade.png") no-repeat center center;
    background-size: contain;

    .grade {
      color: #3170FF;
      font-weight: bold;
      font-size: 80rpx;
      margin-top: 78rpx;
    }

    .desc {
      color: #3170FF;
      margin-bottom: 78rpx;
    }
  }

  .report-section {
    margin-top: 40rpx;
    width: 100%;
    min-height: 200rpx;
    background: url("@/static/images/section-bg.png") no-repeat -28rpx 0;
    background-size: 100% auto;

    background-color: #f0f0f0;
    //background-color: red;

    .title {
      width: 156rpx;
      height: 48rpx;
      color: #fff;
      font-weight: bold;
      font-size: 32rpx;

    }
  }

  .section01 {
    height: 524rpx;
    background-color: #fff;
    border-radius: 16rpx;
    box-sizing: border-box;
    padding: 10rpx 32rpx 32rpx;
    position: relative;

    .evaluate-box {
      margin-top: 44rpx;
      display: flex;
      align-items: center;

      .tag {
        color: #3170FF;
        border: 1px solid #3170FF;
        width: 56rpx;
        height: 36rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 8rpx;
        font-size: 20rpx;
      }

      .time {
        color: #94949C;
        font-size: 24rpx;
        margin-left: 6rpx;
      }
    }

    .explain {
      margin-top: 32rpx;

      .text {
        height: 40rpx;
        line-height: 40rpx;
        color: #646469;
        margin-bottom: 12rpx;
      }

      .box {
        display: flex;
        justify-content: space-between;

        .item {
          width: 114rpx;
          height: 128rpx;
          border-radius: 8rpx;
          border: 1px solid rgba(49, 112, 255, 0.12);
          background-color: rgba(136, 173, 255, 0.04);
          display: flex;
          flex-direction: column;
          align-items: center;

          .grade {
            color: #001850;
            font-size: 40rpx;
            height: 80rpx;
            line-height: 80rpx;
            font-weight: bold;
          }

          .desc {
            background-color: rgba(136, 173, 255, 0.10);
            height: 48rpx;
            width: 100%;
            line-height: 48rpx;
            text-align: center;
            color: rgba(0, 24, 80, .5);

          }
        }
      }

    }

    .description {
      //border: 1px solid red;
      margin-top: 20rpx;
      color: #646469;
      font-size: 24rpx;
      line-height: 44rpx;
    }

    .tip-pic {
      position: absolute;
      width: 150rpx;
      height: 150rpx;
      right: 74rpx;
      top: 112rpx;

      .img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .section02 {
    padding-bottom: 24rpx;
    height: 734rpx;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 16rpx;
    padding: 10rpx 32rpx 32rpx;

    .content {
      .top {
        padding: 32rpx 0;
        box-sizing: border-box;
        height: 214rpx;
        //background-color: red;
        border-bottom: 1px solid rgba(49, 112, 255, 0.20);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;

        .img {
          width: 120rpx;
          height: 94rpx;
        }

        .desc {
          font-size: 28rpx;
          color: #3D3D41;
        }
      }

      .bottom {
        padding-top: 6rpx;

        .line {
          width: 100%;
          height: 72rpx;
          display: flex;
          align-items: center;
          font-size: 26rpx;
          justify-content: space-between;

          .desc {
            color: #94949C;
          }

          .info {
            max-width: 270rpx;
            color: #3D3D41;
            //white-space: normal;
            word-wrap: break-word;
            text-align: right;
          }
        }
      }
    }
  }

  .section03 {
    box-sizing: border-box;
    background-color: #fff;
    //border: 1px solid #000;
    border-radius: 16rpx;
    height: 664rpx;
    padding: 10rpx 0rpx 32rpx;

    .title {
      width: 100%;
      padding-left: 32rpx;
    }

    .content {
      //border: 1px solid greenyellow;
      //margin-bottom: 4rpx;
      padding: 32rpx;
      box-sizing: border-box;
      border-radius: 16rpx;

      .risk {
        display: flex;
        justify-content: space-between;
        //border:1px solid red;
        .left {
          width: 150rpx;
          height: 224rpx;
          border: 1px solid rgba(49, 112, 255, 0.12);
          color: #001850;
          background-color: rgba(136, 173, 255, 0.10);
          font-size: 24rpx;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .box {
            width: 86rpx;
            height: 80rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;

            .line {
            }
          }
        }

        .right {
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .line {
            color: #94949C;
            width: 440rpx;
            height: 64rpx;
            border: 1px solid rgba(49, 112, 255, 0.12);
            line-height: 64rpx;
            padding-left: 24rpx;
            box-sizing: border-box;

          }
        }

      }

      .proposal {
        border-radius: 16rpx;
        margin-top: 32rpx;
        background: rgba(255, 235, 214, 0.45);
        box-shadow: 0px 4px 14px 0px rgba(106, 145, 218, 0.05), 0px 3px 8px -4px rgba(106, 145, 218, 0.08), inset 0px 0px 3px 0px rgba(255, 255, 255, 0.3);
        font-size: 14px;
        font-weight: 400;
        color: #DF6B14;
        line-height: 24px;

        .sub {
          border-radius: 16rpx 16rpx 0 0;
          width: 204px;
          color: #FFFFFF;
          font-size: 12px;
          text-indent: 8rpx;
          background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 109, 0, 0.6) 100%);
        }

        .text {
          padding: 16rpx 28rpx;
          font-size: 28rpx;
          color: #DF6B14;
        }
      }
    }

  }

  .section04 {
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 16rpx;
    height: 668rpx;
    padding: 10rpx 0rpx 32rpx;

    .title {
      width: 100%;
      padding-left: 32rpx;
    }

    .content {
      padding: 32rpx;
      box-sizing: border-box;
    }
  }

  .section05 {
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 16rpx;
    height: 374rpx;
    padding: 10rpx 0rpx 32rpx;

    .title {
      width: 100%;
      padding-left: 32rpx;
    }

    .content {
      padding: 32rpx;
      box-sizing: border-box;

      .top {
        font-size: 24rpx;
        width: 100%;

        .box {
          display: flex;

          .item {
            width: 110rpx;
            height: 50rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            background: url("@/static/images/bubble.png") no-repeat center center;
            background-size: 100% 100%;
            //border: 1px solid red;
            color: #3170FF;
            margin-right: 16rpx;
            flex-shrink: 0;
          }

          .item-active {
            color: #fff;
            background: url("@/static/images/bubble-active.png") no-repeat center center;

          }
        }

      }

      .bottom {
        margin-top: 24rpx;
      }
    }
  }

  .section06, .section07, .section08 {
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 16rpx;
    height: 524rpx;
    padding: 10rpx 0rpx 32rpx;

    .title {
      width: 100%;
      padding-left: 32rpx;
    }

    .content {
      padding: 32rpx;
      box-sizing: border-box;

    }
  }

  .section07 {
    height: 682rpx !important;

    .content {
      .top {
        display: flex;
        align-items: center;

        .block {
          width: 4rpx;
          height: 24rpx;
          background-color: #3170FF;
          margin-right: 8rpx;
        }

        .text {
          color: #001850;
        }
      }

      .bottom {
        margin-top: 20rpx;
      }
    }
  }

  .section08 {
    height: 290rpx !important;

    .content {
      .top {
        display: flex;
        align-items: center;

        .block {
          width: 4rpx;
          height: 24rpx;
          background-color: #3170FF;
          margin-right: 8rpx;
        }

        .text {
          color: #001850;
        }
      }

      .bottom {
        margin-top: 20rpx;
      }
    }
  }

  .section09 {
    height: 1926rpx;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 16rpx;
    padding: 10rpx 0rpx 32rpx;

    .title {
      width: 100%;
      padding-left: 32rpx;
    }

    .content {
      padding: 0 32rpx;
      box-sizing: border-box;

      .content-item {
        padding: 32rpx 0;
        border-bottom: 1px solid rgba(49, 112, 255, 0.20);

        .top {
          height: 48rpx;
          width: max-content;
          background: linear-gradient(to top, #93B4FF 0%, #9FD2FF 30%, transparent 30%, transparent 100%);
          display: grid;
          align-items: end;

          .text {
            color: #3D3D41;
            font-size: 32rpx;
            font-weight: bold;
          }
        }

        .bottom {
          .bottom-item {
            display: flex;
            height: 36rpx;
            justify-content: space-between;
            margin-top: 28rpx;
            font-size: 26rpx;
            color: #3D3D41;

            .left {
            }

            .right {
              color: #FF8326;
            }
          }
        }
      }

    }
  }

  .section10, .section11 {
    height: 1356rpx;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 16rpx;
    padding: 10rpx 0rpx 32rpx;

    .title {
      width: 100%;
      padding-left: 32rpx;
    }

    .content {
      padding: 32rpx;
      box-sizing: border-box;
    }
  }

  .section11 {
    height: 280rpx !important;

    .content {
      padding: 24rpx 32rpx !important;

      .content-item {
        font-size: 26rpx;
        color: #3D3D41;
        height: 36rpx;
        margin-bottom: 28rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        &:last-of-type {
          margin-bottom: 0rpx;
        }

        .left {

        }

        .right {
          color: #E40032;
        }
      }
    }
  }

  .section12 {
    // height: 1572rpx;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 16rpx;
    padding: 10rpx 0rpx 32rpx;

    .title {
      width: 100%;
      padding-left: 32rpx;
    }

    .content {
      padding: 0 32rpx;
      box-sizing: border-box;

      .content-item {
        padding: 24rpx 0;

        .top {
          font-size: 22rpx;
          color: #646469;
        }

        .bottom {
          font-size: 26rpx;
          color: #94949C;

          .item {
            margin-top: 28rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .right {
              color: #3D3D41;
            }
          }
		  .page{
			  text-align: center;
			  margin-bottom: 12px;
			 font-size: 22rpx;
		  }
        }
      }
    }
  }

  .section13 {
    margin-top: 40rpx;
    border-radius: 16rpx;
    background: linear-gradient(to bottom, rgba(49, 112, 255, 0.15) 0%, rgba(197, 215, 255, 0) 30%, rgba(197, 215, 255, 0) 30%, #fff 100%);
    padding: 12rpx 32rpx 12rpx;
    box-sizing: border-box;

    .section-item {
      //margin-top: 32rpx;
      padding-top: 32rpx;

      .text {
        width: max-content;
        color: #3D3D41;
        font-size: 32rpx;
        font-weight: bold;
        height: 48rpx;
        display: grid;
        align-items: end;
        background: linear-gradient(to top, #93B4FF 0%, #9FD2FF 30%, transparent 30%, transparent 100%);
      }

      .content {
        padding: 24rpx 0 32rpx;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(49, 112, 255, 0.20);
        color: #3D3D41;
        font-size: 28rpx;

        .line {
          display: flex;
          color: #3D3D41;
          justify-content: flex-start;

          .left {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            line-height: 48rpx;
          }

          .right {
            font-size: 28rpx;
            line-height: 48rpx;
          }
        }
      }
    }

    .section-item:last-of-type .content {
      border-bottom: none;
    }
  }
}
